<script setup lang="ts">
import { ref, unref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Iphone, Lock } from '@element-plus/icons-vue'
import { getAgreementDetail, getSendMessage, usePasswordLogin } from '@fl/api/user-api'
import Footer from '@/components/footer.vue'
import Header from '@/components/header.vue'
import { genBgUrl, oss } from '@fl/logics/oss'
import AccountLoginForm from './account-login-form.vue'
import MobileLoginForm from './mobile-login-form.vue'

const visible = ref(false)
const titleDialog = ref('')
const pdfUrl = ref('')
// const agreementData = {
//     userService: '',
//     privacyPolicy: '',
// }

const activeForm = ref<number>(1)
// const loginBg = genBgUrl(oss.login.bg)

function forgetPassword() {
    ElMessage.warning('请联系管理员')
}
</script>

<template>
    <div class="user-login">
        <Header />

        <div class="login-content pl-[60%] flex flex-col h-full justify-center">
            <div class="px-50 pb-30 pt-30 bg-white rd-8 shadow-lg flex flex-col w-460 justify-center">
                <h2 class="mb-12 text-32 font-600">
                    欢迎登录
                </h2>

                <div class="mx-auto text-20 text-gray-500 flex items-center">
                    <span :class="`cursor-pointer ${unref(activeForm) === 1 && 'text-brand-red'}`"
                          @click="activeForm = 1"
                    >
                        账号登录
                    </span>

                    <!-- <div class="mx-16 bg-black/10 h-16 w-1" />

                    <span :class="`cursor-pointer ${unref(activeForm) === 2 && 'text-brand-red'}`"
                          @click="activeForm = 2"
                    >
                        手机登录
                    </span> -->
                </div>

                <div class="mt-20">
                    <div v-show="unref(activeForm) === 1">
                        <AccountLoginForm />

                        <ElButton type="primary"
                                  link
                                  class="text-center w-full"
                                  @click="forgetPassword"
                        >
                            忘记密码？
                        </ElButton>
                    </div>

                    <MobileLoginForm v-show="unref(activeForm) === 2" />
                </div>
            </div>
        </div>

        <Footer />

        <el-dialog v-model="visible"
                   fullscreen
                   append-to-body
        >
            <template #header>
                <p class="dialogheader">
                    {{ titleDialog }}
                </p>
            </template>

            <iframe :src="pdfUrl"
                    width="100%"
                    height="800px;"
            />
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.user-login {
    .login-content {
        position: relative;
        width: 100%;
        height: calc(100vh - 164px);
        background-image: url('/assets/sso_bg.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
}
</style>
